<!-- UserListView.vue -->
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import {
    getUserListFn,
    addUserFn,
    delUserFn,
    editUserFn,
    queryUserFn,
} from "@/api/user";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

// 用户列表数据和分页参数
const userList = ref([]);
const length = ref(0); // 当前页码
const currentPage = ref(1); // 每页显示的条数
const dialogVisible = ref(false);
const type = ref("10010"); // 10010 添加，10011 修改

const formData = reactive({
    id: "",
    username: "",
    password: "",
    role: "",
    name: "",
});
const username = ref("");

// 获取用户列表
const fetchUserList = () => {
    getUserListFn({
        count: currentPage.value,
        pageSize: 10,
    }).then((res) => {
        userList.value = res.data.userList;
        length.value = res.data.length;
    });
};

// 页面加载时获取用户列表
onMounted(fetchUserList);

// 分页切换
const currentChange = () => {
    fetchUserList();
};

// 打开添加对话框
const addClick = () => {
    type.value = "10010";
    dialogVisible.value = true;
    // 清空表单数据
    formData.id = "";
    formData.username = "";
    formData.password = "";
    formData.role = "";
    formData.name = "";
};

// 提交添加用户表单
const submitClick = () => {
    dialogVisible.value = false;
    formData.id = Math.random();

    addUserFn(formData).then((res) => {
        ElMessage.success(res.message);
        // 重置表单
        formData.id = "";
        formData.username = "";
        formData.password = "";
        formData.role = "";
        formData.name = "";
        // 刷新用户列表
        fetchUserList();
    });
};

// 删除用户
const delClick = (id) => {
    delUserFn({ id }).then((res) => {
        ElMessage.success(res.message);
        fetchUserList();
    });
};

// 打开编辑对话框
const editClick = (user) => {
    type.value = "10011";
    dialogVisible.value = true;
    // 填充表单数据
    Object.assign(formData, user);
};

// 提交编辑用户
const editSubmitClick = () => {
    editUserFn(formData).then((res) => {
        dialogVisible.value = false;
        ElMessage.success(res.message);
        // 清空表单数据
        formData.id = "";
        formData.username = "";
        formData.password = "";
        formData.role = "";
        formData.name = "";
        // 刷新用户列表
        fetchUserList();
    });
};

// 查询用户
const queryClick = () => {
    queryUserFn({ username: username.value }).then((res) => {
        userList.value = res.userList;
        length.value = res.length;
    });
};
</script>

<template>
    <div>
        <header>
            <h2>用户列表</h2>
            <span>
                <el-button type="primary" :icon="Search" @click="queryClick"
                    >查找用户</el-button
                >
                <el-input v-model="username" style="width: 300px" />
                <el-button type="primary" @click="addClick">
                    <el-icon :size="18"><Plus /></el-icon>&nbsp;添加用户
                </el-button>
            </span>
        </header>

        <!-- 用户列表 -->
        <el-table :data="userList" stripe style="width: 100%" border>
            <el-table-column type="index" label="编号" width="60">
                <template #="{ $index }">
                    <span>
                        {{ $index + 1 + (currentPage - 1) * 10 }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="username"
                label="用户名"
                width="120"
            ></el-table-column>
            <el-table-column prop="password" label="密码"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column prop="name" label="用户名称"></el-table-column>
            <el-table-column label="操作">
                <template #="data">
                    <el-button
                        type="primary"
                        :icon="Edit"
                        @click="editClick(data.row)"
                    ></el-button>
                    <el-button
                        type="danger"
                        :icon="Delete"
                        @click="delClick(data.row.id)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="fenye">
            <el-pagination
                @current-change="currentChange"
                style="margin-top: 10px"
                v-model:current-page="currentPage"
                background
                layout="prev, pager, next"
                :page-size="10"
                :total="length"
            />
        </div>
    </div>

    <!-- ----------- 添加框 -------------- -->
    <el-dialog
        v-model="dialogVisible"
        :title="type == '10010' ? '添加用户' : '修改用户'"
        width="600"
    >
        <el-form :model="formData" label-width="80px">
            <div class="form">
                <el-form-item label="账号">
                    <el-input
                        v-model="formData.username"
                        placeholder="请输入用户账号"
                    />
                </el-form-item>

                <el-form-item label="密码">
                    <el-input
                        v-model="formData.password"
                        placeholder="请输入用户密码"
                    />
                </el-form-item>

                <el-form-item label="姓名">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入用户姓名"
                    />
                </el-form-item>
            </div>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button
                    v-if="type == '10010'"
                    type="primary"
                    @click="submitClick"
                >
                    提交
                </el-button>
                <el-button v-else @click="editSubmitClick"> 修改 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
header {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;

    h2 {
        display: inline-block;
    }

    span {
        display: inline-block;

        .el-button:last-child {
            margin-right: 10px;
        }
    }
}

.form {
    .el-form-item {
        display: flex;
        align-items: center; /* 垂直居中对齐 */
    }
    .el-form-item .el-input {
        line-height: normal; /* 保证输入框的行高正常 */
    }
}

.fenye {
    margin-top: 0px;
    display: flex;
    justify-content: center;
}
</style>
